<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 顶部工具栏 -->
        <PageTools>
          <el-button slot="before" type="primary" max-height="40px" @click="dialogShow = true">添加房产</el-button>
          <template slot="after">
            <el-select v-model="selectQuery.category" placeholder="全部分类" class="categoryIpt">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
            <div style="width: 600px">
              <el-input v-model="selectQuery.title_contains" placeholder="请输入房产关键字" class="input-with-select" suffix-icon="el-icon-notebook-2">
                <el-select slot="prepend" v-model="selectQuery.agent" placeholder="全部经纪" class="categoryIpt">
                  <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-button slot="append" @click="selectFn">筛选</el-button>
              </el-input>
            </div>
          </template>
        </PageTools>

        <!-- 放置表格和分页 -->
        <div v-loading="loading" class="main" element-loading-text="拼命加载中">
          <!-- height="calc(100vh - 220px)" -->
          <el-table border :data="propertyList" height="calc(100vh - 247px)">
            <el-table-column label="封面" sortable="" prop="image" width="280" max-height="280px">
              <template v-slot="{ row }">
                <el-image
                  style="width: 250px; height: 250px; border-radius: 10%;"
                  :src="row.image"
                />
              </template>
            </el-table-column>
            <el-table-column label="标题" sortable="" prop="title" />
            <el-table-column label="标签" sortable="" prop="tags">
              <template v-slot="{ row }">
                <el-tag v-for="(item, index) in row.tags" :key="index" type="success">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="地址" sortable="" prop="address" />
            <el-table-column label="分类" sortable="" prop="category.title" />
            <el-table-column label="经纪" sortable="" prop="agent.name" />
            <el-table-column label="价格" sortable="" prop="price" />
            <el-table-column label="介绍" sortable="" prop="desc" />
            <el-table-column label="图片" sortable="" prop="photos" width="250" max-height="250px">
              <template v-slot="{ row }">
                <el-image
                  v-for="(item, index) in row.photos"
                  :key="index"
                  style="width: 180px; height: 180px; border-radius: 10%;"
                  :src="item"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" sortable="" fixed="right" width="180">
              <template v-slot="{ row }">
                <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-siez="propertyQuery._limit" :total="propertyTotal" :page-sizes="[2, 4, 6, 8]" :current-page="curPage" @size-change="handleSizeChange" @current-change="changePage" />
        </el-row>
      </el-card>

      <!-- 放置编辑、新增房产弹层 -->
      <AddProperty ref="addProperty" :dialog-show.sync="dialogShow" :agent-list="agentList" :category-list="categoryList" />
    </div>
  </div>
</template>

<script>
import AddProperty from '@/views/property/component/add-property.vue'
import { delProperty, getPropertyList, getPropertyNum } from '@/api/property'
import { getAgents } from '@/api/agents'
import { getCategory } from '@/api/category'

export default {
  components: { AddProperty },
  data() {
    return {
      curPage: 1,
      dialogShow: false,
      selectQuery: {
        title_contains: '',
        agent: '',
        category: ''
      },
      agentList: [],
      categoryList: [],
      loading: false,
      propertyList: [],
      propertyQuery: {
        // 获取客户列表请求参数
        _limit: 2, // 获取的最大条数
        _start: 0 // 开始获取的位置
      },
      propertyTotal: 0,
      propertyId: ''
    }
  },
  created() {
    this.getCategory()
    this.getAgentsList()
    this.getPropertyList()
    this.getPropertyNum()
  },
  methods: {
    // 改变每页显示数量时触发 接收的参数是 每页显示的数量
    handleSizeChange(pagesize) {
      this.propertyQuery._limit = pagesize
      this.getPropertyList()
    },
    // 切换页数时触发
    changePage(newPage) {
      this.curPage = newPage
      this.propertyQuery._start = (newPage - 1) * this.propertyQuery._limit
      this.getPropertyList()
    },
    // 获取房产数量
    async getPropertyNum(params) {
      this.propertyTotal = await getPropertyNum(params)
    },
    // 获取分类列表
    async getCategory() {
      this.categoryList = await getCategory()
      this.categoryList.unshift({ title: '全部分类', id: '' })
    },
    // 获取经纪列表
    async getAgentsList() {
      this.agentList = await getAgents()
      this.agentList.unshift({ name: '全部经纪', id: '' })
    },
    // 获取房产列表
    async getPropertyList() {
      this.loading = true
      this.propertyList = await getPropertyList(this.propertyQuery)
      this.loading = false
    },
    // 筛选房产
    async selectFn() {
      this.curPage = 1
      // 如果筛选条件包含经纪人 参数就是this.propertyQuery+this.selectQuery
      if (this.selectQuery.agent) {
        this.propertyQuery = { _limit: this.propertyQuery._limit, _start: 0, ...this.selectQuery }
        // 如果不包含经纪人但包含分类或者标题  参数只传入title_contains和分类
      } else if (!this.selectQuery.agent && this.selectQuery.title_contains || this.selectQuery.category) {
        this.propertyQuery = { _limit: this.propertyQuery._limit, _start: 0, title_contains: this.selectQuery.title_contains, category: this.selectQuery.category }
        // 如果三个都没有 就只传入默认值
      } else if (!this.selectQuery.agent && !this.selectQuery.title_contains && !this.selectQuery.category) {
        this.propertyQuery = { _limit: this.propertyQuery._limit, _start: 0 }
      }
      this.propertyList = await getPropertyList(this.propertyQuery)
      this.updateNum()
      this.$message.success('筛选成功！')
    },
    // 编辑房产弹层显示
    async edit(id) {
      this.propertyId = id
      this.dialogShow = true// 弹层显示要在拿到客户详情之前 要不然会拿不到弹层的this.$refs
      await this.$refs.addProperty.getPropertyById(id)
    },
    // 删除房产
    async del(id) {
      try {
        await this.$confirm('确认删除该房产吗？', '删除')
        await delProperty(id)
        if (this.propertyList.length === 1) {
          this.propertyQuery._start = this.propertyQuery._start - this.propertyQuery._limit
        }
        this.getPropertyNum()
        this.getPropertyList()
        this.$message.success('删除房产成功！')
      } catch (error) {
        console.log(error)
      }
    },
    updateNum() {
      if (!this.selectQuery.agent && !this.selectQuery.title_contains && !this.selectQuery.category) {
        this.getPropertyNum() // 三个筛选条件都没有 就获取所有客户数量
      } else if (!this.selectQuery.agent) {
        this.getPropertyNum({ title_contains: this.selectQuery.title_contains, category: this.selectQuery.category }) // 如果没有筛选经纪人 就只把标题和分类 当作实参 传入
      } else {
        this.getPropertyNum(this.selectQuery)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  img {
    width: 180px;
    height: 180px;
    border-radius: 10%;
  }

::v-deep .categoryIpt {
  width: 110px;
  .el-input__inner::-webkit-input-placeholder {
    color: #000;
  }
}

::v-deep .main {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.el-button--primary {
  max-height: 40px;
}

::v-deep .el-input-group__append,
::v-deep .el-input-group__prepend  {
  background-color: #fff;
  div.el-select .el-input__inner{
    width: 110px;
    color: #000;
  }
  div.el-select .el-input__inner::-webkit-input-placeholder {
    color: #000;
  }
}
::v-deep .el-input {
  .el-button span,
  .el-icon-notebook-2 {
    color: #000;
  }
}
</style>
